import defPic from '@/img/default_head.png';
import { FC } from 'react';
import IconFont from '../IconFont';

import { CheckboxItem } from './CheckboxList';
import Ostyle from './SelectedItemList.less';

export type SelectedItemListProps = {
  dataSource: CheckboxItem[];
  onDelete?: (value: CheckboxItem) => void;
};

const ListItem = (props: {
  tab: string;
  uniquedKey: string;
  id: string;
  type: string;
  count: number;
  name: string;
  phone?: string;
  avatar?: string;
  onDelete?: (value: CheckboxItem) => void;
}) => {
  const { id, type, name, phone, avatar, tab, count, uniquedKey, onDelete } = props;

  const renderAvatar = () => {
    switch (type) {
      case '1':
        return <img src={avatar || defPic} className={Ostyle.item_avatar} />;
      case '2':
        return <IconFont type="icon-chengyuanyubumen" className={Ostyle.item_typeicon} />;
      case '3':
        return <IconFont type="icon-gang_wei" className={Ostyle.item_typeicon} />;
    }
  };

  const clickHandler = () => {
    onDelete?.({ id, type, name, phone, avatar, tab, count, uniquedKey });
  };

  return (
    <li className={Ostyle.list_item} key={id}>
      {renderAvatar()}
      <p className={Ostyle.item_text}>
        <span>{name}</span>
        {type === '1' && <span>({phone})</span>}
      </p>
      <IconFont type="icon-tishilei_cuowu" className={Ostyle.item_deleteicon} onClick={clickHandler} />
    </li>
  );
};

const SelectedItemList: FC<SelectedItemListProps> = ({ dataSource = [], onDelete }) => {
  return (
    <ul className={Ostyle.right_selected_list}>
      {dataSource?.map((item) => (
        <ListItem
          key={item.uniquedKey}
          tab={item.tab}
          uniquedKey={item.uniquedKey}
          id={item.id}
          type={item.type}
          name={item.name}
          phone={item.phone}
          count={item.count}
          avatar={item.avatar}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
};

export default SelectedItemList;
